<template>
  <div>
    <div class="search-body">
      <div class="location" @click="choiceCity()">
        <img src="../../assets/images/location-icon.png" alt=""/>
        <span>{{youChoiceCityName}}</span>
      </div>
      <div class="input-box">
        <img src="../../assets/images/search-ico.png" alt=""/>
        <!--<router-link to="">-->
          <form @submit.prevent="formSubmit" action="javascript:return true">
          <input type="search" placeholder="请输入昵称或手机号码" @keydown.13="inputBlur" v-model="searchData"/>
          </form>
        <!--</router-link>-->
      </div>
      <div class="filter-box" @click="openPop()">
        <img src="../../assets/images/filter-icon.png" alt=""/>
      </div>
    </div>

    <city
      :is-show.sync='city.isShow'
      :on-choose='city.onChoose'
      :city-data='city.cityData'
      :local-city='localCity'
      :star-city='city.starCity'
      :close="close"
    ></city>
    <!--筛选弹窗-->
    <div class="filter-pop" :class="{show:isShow}">
      <div style="height:100%;" @click="closePop()"></div>
      <div class="filter-bg">
        <p>筛选</p>
        <div class="select-box">
          <div class="row-title">性别</div>
          <div class="select-info">
            <template v-for="(item,index) in gender">
              <span class="si-item" :class="{on:selecte==index}"
                    @click="selecte=index,changedGender(index)">{{item}}</span>
            </template>
          </div>
        </div>
        <!--侍酒师，历史筛选内容-->
        <template v-if="searchContent==0 || searchContent==2">
          <div class="select-box">
            <div class="row-title">年龄</div>
            <div class="select-info">
              <template v-for="(item,index) in age">
              <span class="si-item" :class="{on:selecte1==index}"
                    @click="selecte1=index,changedAge(index)">{{item}}</span>
              </template>
            </div>
          </div>
        </template>
        <!--代理筛选内容-->
        <template v-if="searchContent==1">
          <div class="select-box">
            <div class="row-title">服务商</div>
            <div class="select-info">
              <template v-for="(item,index) in service">
              <span class="si-item" :class="{on:selecte1==index}"
                    @click="selecte1=index,changedLevel(index)">{{item}}</span>
              </template>
            </div>
          </div>
        </template>

        <button type="button" v-if="searchContent==0" class="confirm-btn" @click="sommmeliresConfirm()">确定</button>
        <button type="button" v-if="searchContent==1" class="confirm-btn" @click="agentConfirm()">确定</button>
        <button type="button" v-if="searchContent==2" class="confirm-btn" @click="historyConfirm()">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
  import city from './city'
  import global from './global.vue'


  export default {
    name: 'search',
    props: {
      searchContent: {
        type: Number,
        require: true,
      },
      sSort: {
        type: Number,
        require: true
      },
      curCity: {
        type: String,
        require: true
      }
    },
    data() {
      return {
        apiUrl: global.apiUrl,
        gender: ["全部", "男", "女"],
        age: ["全部", "20-25岁", "25-30岁", "30-35岁", "35以上"],
        service: ["全部", "金牌代理", "银牌代理", "区域服务商"],
        selecte: 0,
        selecte1: 0,
        isShow: false,
//        youChoiceCityName: '请选择城市...',
        city: {
          isShow: false,
          cityData: [],
          onChoose: null,
          localCity: {},
          starCity: [],
          searchData:'',
        },
        searchData:'',
        genderSelect:0,
        ageSelect:0,
        serviceSelect:0,
      }
    },
    components: {
      city,
    },
    methods: {
      //搜索
      formSubmit(){
        console.log("cnn")
        console.log(this.searchData)
        this.bus.$emit('searchData',this.searchData)
      },
      //
      inputBlur(){
        this.$store.state.search = this.searchData
      },
      // 打开筛选弹窗
      openPop() {
        this.isShow = true;
      },
      objKeySort(obj) {//排序的函数
        var newkey = Object.keys(obj).sort();
        //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
        var newObj = {};//创建一个新的对象，用于存放排好序的键值对
        for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
          newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
        }
        return newObj;//返回排好序的新对象
      },
      // 选择性别
      changedGender(idx) {
        console.log(idx);
        this.genderSelect = idx
      },
      // 选择年龄
      changedAge(idx) {
        console.log(idx);
        this.ageSelect = idx
      },
      changedLevel(idx){
        this.serviceSelect = idx
      },

      // 关闭筛选弹窗
      closePop() {
        this.isShow = false;
      },
      //侍酒师筛选 确定按钮
      sommmeliresConfirm() {
        let sFilter=[];
        let gender = this.genderSelect
        let age = this.ageSelect
        sFilter.push(gender);
        sFilter.push(age);
        this.$store.dispatch('setSFilter',sFilter);
        console.log("sommmeliresConfirm");
        this.closePop();
      },
      //代理商筛选 确定按钮
      agentConfirm() {
        console.log("agentConfirm");
        this.closePop();
      },
      //历史筛选 确定按钮
      historyConfirm() {
        console.log("historyConfirm");
        this.closePop();
      },
      choiceCity() {
        this.city.isShow = true;
      },
      getCityInfo() {
        var self = this;
        var cityMap = new Object;
        //获取全国城市列表
        self.$http.get(self.apiUrl + "/city/cityList")
          .then(res => {
            let data = res.data.data;
//            console.log(data)
            for (let i = 0; i < data.length; i++) {
              var newArray = new Array;
              if (!cityMap[data[i].pinyin]) {
                newArray.push(data[i])
                cityMap[data[i].pinyin] = newArray
              } else {
                cityMap[data[i].pinyin].push(data[i])
              }
            }
            cityMap = self.objKeySort(cityMap);
            for (var prop in cityMap) {
              for (var i = 0; i < (cityMap[prop]).length; i++) {
                if (cityMap[prop][i].isHot == 1) {
                  self.city.starCity.push(
                    {
                      cityId: cityMap[prop][i].id,
                      cityName: cityMap[prop][i].city,
                      citySpell: "",
                      cityFirstLetter: !cityMap[prop][i].pinyin ? '' : cityMap[prop][i].pinyin.slice(0, 1)
                    },
                  )

                }
                self.city.cityData.push(
                  {
                    cityId: cityMap[prop][i].id,
                    cityName: cityMap[prop][i].city,
                    citySpell: "",
                    cityFirstLetter: !cityMap[prop][i].pinyin ? '' : cityMap[prop][i].pinyin.slice(0, 1)
                  }
                )
              }
            }
          }).catch(function (err) {
          console.log("error:" + err);
        })
      },
      close() {
        this.city.isShow = false;
      },
    },

    computed: {
      'youChoiceCityName'() {
        let test = this.$store.getters.getCity;
        return test;
      },

      'localCity'(){
        return {
          cityId: '',
          cityName:this.youChoiceCityName  ,
          citySpell: "",
          cityFirstLetter: "",
        }
      },

    },
    mounted() {
      let _this = this;

      this.getCityInfo();
      this.city.onChoose = function (res) {
        //ToDo: 选完城市后......
        console.log(res);
        _this.city.isShow = false;
        let cityName =  res.cityName;
        _this.$store.dispatch('setCity',cityName);
//        _this.youChoiceCityName = res.cityName;
        _this.getCityInfo();
//        _this.city.onChoose = function (res) {
//          _this.city.isShow = false;
//          _this.youChoiceCityName = res.cityName;
//        }
      }
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  /*搜索*/
  .search-body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 10px 10px;
    background: #D44242;
    z-index: 10;
    .location, .input-box, .filter-box {
      display: inline-block;
      height: 30px;
      line-height: 30px;
      color: #fff;
      vertical-align: top;
    }
    .location {
      width: 18%;
      line-height: 40px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      img {
        height: 60%;
      }
      span {
        font-size: 0.9rem;
      }
    }
    .input-box {
      width: 68%;
      padding: 0 4px;
      border-radius: 4px;
      background-color: #fff;
      text-align: center;
      img {
        width: 8%;
        vertical-align: middle;
      }
      form{
        display: inline-block;
        width: 76%;
        color:#333;
      }
      input {
        font-size: 0.9rem;
        width: 100%;
        height: 30px;
        border: none;
        outline: none;
        vertical-align: top;
      }
    }

    .filter-box {
      width: 10%;
      text-align: right;
      img {
        width: 75%;
        vertical-align: middle;
      }
    }
  }

  /*筛选弹窗*/

  .filter-pop {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    transition: 0.5s all;
    z-index: 20;
    .filter-bg {
      position: absolute;
      top: 0;
      right: 0;
      width: 80%;
      height: 100%;
      background: #fff;
      p {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        background: #F3F3F3;
        font-size: 0.95rem;
        color: #777;
      }
      .select-box {
        width: 100%;
        padding-left: 10px;
        margin: 10px auto 0;
        .row-title {
          height: 30px;
          line-height: 30px;
          font-size: 0.95rem;
          color: #777;
        }
        .select-info {
          display: flex;
          flex-wrap: wrap;
          .si-item {
            font-size: 0.9rem;
            color: #777;
            padding: 2px 10px;
            border: 1px solid #aaa;
            border-radius: 20px;
            margin-right: 5%;
            margin-bottom: 10px;
          }
          .on {
            border: 1px solid #D44242;
            background: #D44242;
            color: #fff;
          }
        }
      }
      /*button*/
      .confirm-btn {
        width: 60%;
        height: 40px;
        border: none;
        border-radius: 4px;
        background: #D44242;
        font-size: 1rem;
        color: #fff;
        margin-left: 20%;
        margin-top: 60%;
      }
    }
  }

  .show {
    left: 0;
  }

</style>
